<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <title>Resume of PInkJoe</title>
    <link rel="stylesheet" href="./css/loading.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="font_1957154_j3mtv16uk9g/iconfont.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
    <script src="//cdn1.lncld.net/static/js/3.6.8/av-min.js"></script>
    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- loading动画 -->
    <!-- <div id="siteWelcom" class="active">
            <div class="loading"></div>
        </div> -->

    <div id="topNavBar" class="topNavBar clearfix">
        <div class="logo">
            <a href="#"><span class="rs">RS</span>&nbsp;<span class="card">card</span></a>
        </div>
        <nav>
            <ul class="clearfix">
                <li><a href="#about">关于</a></li>
                <li>
                    <a href="#skills">技能</a>
                    <ul class="submenu">
                        <li>技能1</li>
                        <li>技能2</li>
                        <li>技能3</li>
                    </ul>
                </li>
                <li>
                    <a href="#works">作品</a>
                    <ul class="submenu">
                        <li>作品1</li>
                        <li>作品2</li>
                        <li>作品3</li>
                        <li>作品4</li>
                    </ul>
                </li>
                <li><a href="#messageBoard">留言版</a></li>
            </ul>
        </nav>
    </div>

    <div class="banner">
        <div class="mask"></div>
    </div>

    <main id="about" data-x>
        <div class="card">
            <div class="pictureAndText clearfix">
                <div class="picture">
                    <img src="image/5.jpg" alt="头像" width="300px" height="320px">
                </div>
                <div class="text">
                    <div class="profile">
                        <span class="welcome">hello <span class="triangle"></span></span>
                        <h1>Byarn_Joe</h1>
                        <p>前端开发工程师</p>
                        <hr>
                        <dl>
                            <dt>年龄</dt>
                            <dd>20</dd>
                            <dt>所在城市</dt>
                            <dd>深圳</dd>
                            <dt>邮箱</dt>
                            <dd>1839745911@qq.com</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <footer>
                <a href="https://github.com" title="github">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-git"></use>
                    </svg>
                </a>
                <a href="https://twitter.com" title="Twitter">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ttww"></use>
                    </svg>
                </a>
                <a href="https://www.weibo.com/login.php" title="weibo">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                </a>
            </footer>
        </div>
        <div class="downloadResume">
            <a href="resume.pdf" target="_blank" download>下载简历</a>
        </div>
        <p class="selfIntroduction">
            正在学习web开发<br>
            技能：前端开发，切图
        </p>
    </main>

    <section id="skills" class="skills" data-x>
        <h2>技能</h2>
        <ol class="clearfix">
            <li>
                <h3>HTML5&amp;CSS3</h3>
                <div class="expBar">
                    <div class="exp"></div>
                </div>
            </li>
            <li>
                <h3>Javascript</h3>
                <div class="expBar">
                    <div class="exp"></div>
                </div>
            </li>
            <li>
                <h3>jQuery</h3>
                <div class="expBar">
                    <div class="exp"></div>
                </div>
            </li>
            <li>
                <h3>vue</h3>
                <div class="expBar">
                    <div class="exp"></div>
                </div>
            </li>
            <li>
                <h3>Webpack</h3>
                <div class="expBar">
                    <div class="exp"></div>
                </div>
            </li>
            <li>
                <h3>HTTP</h3>
                <div class="expBar">
                    <div class="exp"></div>
                </div>
            </li>
        </ol>
    </section>

    <section id="works" class="works" data-x>
        <h2>作品集</h2>
        <!-- <nav>
            <ol>
                <li id="works1">所有</li>
                <li id="works2">框架</li>
                <li id="works3">原生Javascript&amp;CSS3</li>
            </ol>
            <div class="decorationBar">
                <div id="decorationItem" class="item item1"></div>
            </div>
        </nav> -->
        <div class="jobs">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="http://alibaba_9_1839745911.gitee.io/navgation-site-master"><img
                                src="./image/works1.jpeg" alt=""></a></div>
                    <div class="swiper-slide"><a href=" http://alibaba_9_1839745911.gitee.io/drawing-board-master"><img
                                src="./image/works2.jpeg" alt=""></a></div>
                    <div class="swiper-slide"><a href="http://alibaba_9_1839745911.gitee.io/build"><img
                                src="./image/works3.jpg" alt=""></a></div>
                    <div class="swiper-slide"><a href="http://alibaba_9_1839745911.gitee.io/doraemon-css-master"><img
                                src="./image/works4.jpg" alt=""></a></div>
                    <div class="swiper-slide"><a
                            href="https://www.yuque.com/docs/share/ce143438-03f4-46fd-a85b-bed479c5a0ed?#"><img
                                src="./image/works5.jpg" alt=""></a></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>
        </div>
    </section>

    <section id="messageBoard" class="messageBoard" data-x>
        <h2>聚言堂</h2>
        <ol id=messageList></ol>
        <form id=postMessage>
            <textarea name="content" placeholder="开始留言吧。。。"></textarea>
            <input type="text" name="name" placeholder="在这里留下您的大名">
            <button type="submit">发表</button>
            <div class="loading"></div>
        </form>
    </section>

    <script src="./js/top-nav-activate-by-mouse.js"></script>
    <script src="./js/auto-scroll-when-click-nav.js"></script>
    <script src="./js/sections-auto-slide-up.js"></script>
    <script src="./js/nav-highlight-when-scroll.js"></script>
    <script src="./js/sticky-navbar.js"></script>
    <script src="./js/works-swiper-init.js"></script>
    <script src="./js/message.js"></script>


    <script>
    // loading动画
    // setTimeout(function(){
    //     var siteWelcom = document.querySelector('#siteWelcom');
    //     siteWelcom.classList.remove('active');
    // },1000);
    </script>
</body>

</html>